/*
* @Author: zhangsai
* @Date: 2018/2/7
* @Last Modified by: zhangsai
* @Last Modified time: 2018/2/7
* @description: 个人中心-协议审批
*/

<template>
    <div>
        <div class="ca-m-t-20 ca-m-b-20 ca-approval__btn">
            <button type="button" :class="{'active': isActive === 1}" @click="changeTab(1, 1)"
                    class="ca-btn ca-btn-default ca-btn__table-header-btn--width ca-m-r-15"><span>全部</span></button>
            <button type="button" :class="{'active': isActive === 2}" @click="changeTab(2, 1)"
                    class="ca-btn ca-btn-default ca-btn__table-header-btn--width ca-m-r-15"><span>待我审批</span></button>
            <button type="button" :class="{'active': isActive === 3}" @click="changeTab(3, 1)"
                    class="ca-btn ca-btn-default ca-btn__table-header-btn--width"><span>我发起的</span></button>
        </div>
        <div class="ca-m-t-20">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    prop="projectType"
                    label="类型"
                    align="center">
                    <template slot-scope="scope">
                        协议审批
                    </template>
                </el-table-column>
                <el-table-column
                    prop="itemName"
                    label="名称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="createUserName"
                    label="发起人"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="发起时间"
                    align="center">
                    <template slot-scope="scope">
                        {{scope.row.createTime | moment("YYYY-MM-DD HH:ss")}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="当前审批步骤"
                    align="center">
                    <template slot-scope="scope">
                        <!--status 总流程为0 说明当前审批进行中-->
                            <!--角色-->
                        <span v-if="scope.row.status == 0">{{scope.row.roleId | getNameById('', roles)}}</span>
                            <!--当前角色审批状态-->
                        <span v-if="scope.row.status == 0">({{scope.row.userStatus | csConstFilter('APPROVAL_STATUS')}})</span>
                        <!--status 总流程为1 说明当前审批 审批结束(通过)-->
                        <span v-if="scope.row.status == 1">审批结束(通过)</span>
                        <!--status 总流程为1 说明当前审批 审批结束(不通过)-->
                        <span v-if="scope.row.status == 2">审批结束(<span class="ca-color-danger">不通过</span>)</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="userName"
                    label="审批人"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="审批时间"
                    align="center">
                    <template slot-scope="scope">
                        {{scope.row.updateTime | moment("YYYY-MM-DD")}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    prop="stepStatus"
                    align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status =='0'" type="text" @click="toDetail(1, scope.row.itemId)">审批</el-button>
                        <el-button type="text" @click="toDetail(2, scope.row.itemId)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="ca-m-t-20 clearfix">
                <el-pagination
                    :key="isActive"
                    class="pull-right"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { api } from '../api';
    import { STATUS_HTTP_SUCCESS, apiHttp } from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        name: 'personalApproval',
        data() {
            return {
                // 协议审批列表
                tableData: [],
                // 协议审批按钮点击状态
                isActive: 1,
                pageIndex: 1,
                pageSize: 5,
                total: 0,
                // 是否有查看详情的权限
                isAuthDetail: isNoAuth('拟投资项目-项目详情-查看'),
                // 角色列表
                roles: this.$store.state.user.roles,


            }
        },
        watch: {},
        props: {},
        created() {
            if (this.$route.params.tab === '1') {
                this.changeTab(2, 1);
            } else if (this.$route.params.tab === '2') {
                this.changeTab(3, 1);
            } else {
                this.changeTab(1, 1);
            }
            this.getAuth();
        },
        methods: {
            getAuth() {
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.changeTab(this.isActive, this.pageIndex);
            },
            // 切换tab type 1：全部 2：待我审批 3：我发起的
            changeTab(type, pageIndex) {
                this.isActive = type;
                this.pageIndex = pageIndex;
                let params = {
                    pageIndex: pageIndex,
                    pageSize: this.pageSize
                };
                let all = api.GET_APPROVAL_LIST_ALL;
                let me = api.GET_APPROVAL_LIST_ME;
                let wait = api.GET_APPROVAL_LIST_WAIT;
                switch (type) {
                    case 1 :
                        this.getApproveList(all, params);
                        break;
                    case 2 :
                        this.getApproveList(wait, params);
                        break;
                    case 3 :
                        this.getApproveList(me, params);
                        break;
                    default :
                        this.getApproveList(all, params);
                }
            },
            // 获取数据
            async getApproveList(url, params) {
                let resData = await apiHttp(url, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.tableData = resData.data.resultData;
                    this.total = resData.data.totalCount;
                }
            },
            // 协议审批 跳转详情和审批页面 1：审批  2：详情
            toDetail(type, itemId) {
                if (!this.isAuthDetail) {
                    this.$message.warning('无项目数据权限');
                    return;
                }
                if (type === 1) {
                    this.$router.push({
                        name: 'pre-investment-project',
                        params: { itemId: itemId, tabIndex: 5, openWindow: true }
                    });
                } else {
                    this.$router.push({
                        name: 'pre-investment-project',
                        params: { itemId: itemId, tabIndex: 5, openWindow: true }
                    });
                }
            },
        },
        components: {}
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .active {
        background: #20A0FF;
        color: #fff;
        border: 1px solid #20A0FF;
    }

    .ca-approval__btn button {
        width: 90px;
    }

    .ca-color-red {
        color: #ff0000;
    }
</style>
